<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 700px; margin-left: 250px;">
            <el-table-column
                    type="index"
                    label="#"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="图片"
                    width="76"
                    style="height: 76px"
                    >
                <template slot-scope="scope">
                    <img :src="scope.row.showUrl" alt="" class="show-img">
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="商品名称"
                    :show-overflow-tooltip = true
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="数量"
                    width="100">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "BuyGoodsMessage",
        props: {
            tableData: {
                type: Array,
                default() {
                    return []
                }
            }
        }
    }
</script>

<style scoped>
    .show-img {
        width: 100%;
    }
</style>